Buscador interno con imagen

A Mactrucos le está gustando esto de jugar con códigos :)
Ha tenido la idea de aplicar una imagen en el buscador interno del blog, me lo explica detalladamente en un mail y con su permiso voy a compartirlo.
Nos situamos en plantilla de diseño y añadimos un elemento de página HTML/Javascript donde incluimos el siguiente código:

<form action="http://search.blogger.com/" name="b-search">
<input id="b-query" placeholder="Busca lo que no veas" name="as_q" type="text"/>
<input value="UTF-8" name="ie" type="hidden"/>
<input value="blg" name="ui" type="hidden"/>
<input value="url-de-tu-blog-sin-http://" name="bl_url" type="hidden"/>
<input id="b-searchbtn" alt="Search This Blog" value="go" title="go "
onclick="document.forms['b-search'].bl_url.value=''url-de-tu-blog-sin-http://"
type="submit"/>
</form>

Si quieres cambiar el botón por una imagen que haga la función del 'go' elimina lo siguiente:

<input id="b-searchbtn" alt="Search This Blog" value="go" title="go "
onclick="document.forms['b-search'].bl_url.value='url-de-tu-blog-sin-http'"
type="submit"/>
</form>

Y en su lugar añades:

<input border="0" alt="Buscar" src="Url-de-la-imagen" type="image"/>
</form>

Podemos seguir personalizando el buscador y esta vez soy yo la que va a meter un poquito de mano en el código, lo haremos añadiendo un color de fondo, un borde incluso si lo deseamos podemos añadir una imagen.
Para ello buscamos el código de nuestro buscador y donde dice:

<input value="url-de-tu-blog-sin-http://" class="b-query" name="bl_url" type="hidden"/>

Y añadiremos lo que aparece en negrita.

Guardamos los cambios y nos dirigimos a la plantilla edición HTML, localizamos ]]></b:skin> y justo antes agregamos lo siguiente:

/* Buscador personalizado */

#b-query{
background:#B22222;
background-image:url('url-de-la-imagen');
background-repeat:no-repeat;
border: 2px solid#ffffff;
font-size: small;
color: #ffffff;
}

/* Buscador personalizado */

Este código es el lugar donde podemos hacer cualquier cambio a la caja del buscador.
background:color de fondo
background-image: para añadir una imagen de fondo.
background-repeat:no-repeat; si deseamos que la imagen se repita lo suprimimos.
border: tipo color y grosor del borde
font-size:tipo de letra.
color: color de la letra.




Una cosa importante... para que el buscador sea efectivo el código debe agregarse correctamente, si os fijáis bien debemos añadir la dirección Url de nuestro blog pero omitiendo el http, es decir si mi blog es " http://www.gemablog-.blogspot.com/ " habría que poner gemablog-.blogspot.com/